<template>
	<view class="container">
		<!-- 视频信息区域 -->
		<view class="video-view">
			<view class="input-view">
				<input class="title-input" v-model="title" placeholder="请输入视频标题" placeholder-class="placeholder" />
				<textarea class="text-input" v-model="text" placeholder="请输入视频简介" placeholder-class="placeholder"
					auto-height />
			</view>
			<view class="video-upload">
				<view class="file-picker" @click="chooseVideo">
					<text class="icon">🎥</text>
					<text class="tip">{{ videoFile ? videoFile.name : '点击选择视频文件' }}</text>
				</view>
			</view>
		</view>

		<!-- 分类选择 -->
		<view class="picker-view" @click="showTypePicker = true">
			<picker mode="selector" :range="typeList" :value="type" @change="typeChange">
				<view class="picker-content">
					<text>{{ typeList[type] || '选择视频类别' }}</text>
					<text class="arrow">▼</text>
				</view>
			</picker>
		</view>

		<!-- 节点编辑区域 -->
		<view class="node-editor">
			<input class="node-time" v-model="newNode.time" placeholder="时间(秒)" type="number" />
			<input class="node-text" v-model="newNode.text" placeholder="节点描述" />
			<button class="add-btn" @click="addNode">添加</button>
		</view>

		<!-- 节点列表 -->
		<scroll-view class="node-list" scroll-y>
			<view v-for="(item, index) in pointList" :key="index" class="node-item">
				<text class="time">{{ formatTime(item.time) }}</text>
				<text class="text">{{ item.text }}</text>
				<text class="delete" @click="deleteNode(index)">×</text>
			</view>
			<view v-if="pointList.length === 0" class="empty-tip">
				暂无节点，请添加时间节点
			</view>
		</scroll-view>

		<!-- 上传按钮 -->
		<button class="fixed-upload-btn" @click="uploadVideo">立即上传</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				path: this.baseUrl + '/upload',
				title: '',
				text: '',
				videoFile: null,
				newNode: {
					time: '1',
					text: 'test'
				},
				pointList: [{
						time: '1',
						text: 'test'
					},
				],
				typeList: ['广场舞', '古典舞', '芭蕾舞', '现代舞'],
				type: 0,
				showTypePicker: false
			}
		},
		methods: {
			// 选择视频文件
			async chooseVideo() {
				try {
					const res = await uni.chooseVideo({
						sourceType: ['album'],
						compressed: false
					});
					this.videoFile = {
						name: res.tempFilePath.split('/').pop(),
						path: res.tempFilePath
					};
				} catch (err) {
					console.log('取消选择');
				}
			},

			// 添加节点
			addNode() {
				if (!this.newNode.time || !this.newNode.text) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				if (this.pointList.some(item => item.time == this.newNode.time)) {
					uni.showToast({
						title: '该时间点已存在',
						icon: 'none'
					});
					return;
				}
				this.pointList.push({
					time: Number(this.newNode.time),
					text: this.newNode.text
				});
				// 按时间排序
				this.pointList.sort((a, b) => a.time - b.time);
				this.newNode = {
					time: '',
					text: ''
				};
			},

			// 删除节点
			deleteNode(index) {
				uni.showModal({
					title: '提示',
					content: '确定删除该节点吗？',
					success: (res) => {
						if (res.confirm) {
							this.pointList.splice(index, 1);
						}
					}
				});
			},

			// 时间格式化
			formatTime(seconds) {
				const mins = Math.floor(seconds / 60);
				const secs = seconds % 60;
				return `${mins.toString().padStart(2, '0')}:${secs.toString().padStart(2, '0')}`;
			},

			// 分类选择
			typeChange(e) {
				this.type = e.detail.value;
			},

			// 上传视频
			async uploadVideo() {
				if (!this.title || !this.text || !this.videoFile) {
					uni.showToast({
						title: '请填写完整信息',
						icon: 'none'
					});
					return;
				}
				if (this.pointList.length === 0) {
					uni.showToast({
						title: '请至少添加一个节点',
						icon: 'none'
					});
					return;
				}

				uni.showLoading({
					title: '上传中...',
					mask: true
				});
				// 实际对接上传接口
				uni.uploadFile({
					url: this.path,
					filePath: this.videoFile.path,
					name: 'video',
					formData: {
						title: this.title,
						desc: this.text,
						type: this.type,
						nodes: JSON.stringify(this.pointList)
					},
					success: (res) => {
						const response = JSON.parse(res.data);
						console.log(response);
						if (response.code === 1) {
							uni.hideLoading();
							console.log('success')
							uni.showToast({
								title: '上传成功',
								icon: 'none'
							});
							this.resetForm();

						} else {
							uni.hideLoading();
							console.log('fail')
							uni.showToast({
								title: response.msg,
								icon: 'none'
							});
							this.resetForm();
						}
					},fail: (err) => {
						uni.hideLoading();
						uni.showToast({
							title: 'fail',
							icon: 'none'
						});
						console.log(err)
					}
				});

			},

			resetForm() {
				this.title = '';
				this.text = '';
				this.videoFile = null;
				this.pointList = [];
				this.type = 0;
			}
		}
	}
</script>

<style lang="scss">
	.container {
		padding: 30rpx;
		height: 100vh;
		box-sizing: border-box;
		background: #f8f9fa;
		display: flex;
		flex-direction: column;
	}

	.video-view {
		display: flex;
		gap: 20rpx;
		margin-bottom: 50rpx;

		.input-view {
			flex: 1;
			display: flex;
			flex-direction: column;
			gap: 20rpx;

			.title-input {
				height: 90rpx;
				padding: 0 30rpx;
				background: white;
				width: 420rpx;
				border-radius: 12rpx;
				font-size: 30rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
			}

			.text-input {
				padding: 20rpx 30rpx;
				background: white;
				width: 420rpx;
				border-radius: 12rpx;
				font-size: 28rpx;
				min-height: 180rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
			}
		}

		.video-upload {
			width: 260rpx;

			.file-picker {
				height: 90%;
				background: white;
				border-radius: 12rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				padding: 30rpx;
				box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
				transition: all 0.2s;

				&:active {
					transform: scale(0.98);
					opacity: 0.9;
				}

				.icon {
					font-size: 80rpx;
					margin-bottom: 20rpx;
				}

				.tip {
					font-size: 24rpx;
					color: #666;
					text-align: center;
					line-height: 1.4;
					/* 新增以下样式 */
					width: 100%;
					display: block;
					word-break: break-all;
					white-space: pre-wrap;
					max-height: 80rpx;
					overflow: hidden;
					text-overflow: ellipsis;
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
				}
			}
		}
	}

	.picker-view {
		margin-bottom: 30rpx;

		.picker-content {
			height: 90rpx;
			background: white;
			border-radius: 12rpx;
			padding: 0 30rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 30rpx;
			color: #333;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

			.arrow {
				color: #999;
				font-size: 24rpx;
				margin-left: 20rpx;
				transform: scale(0.8);
			}
		}
	}

	.node-editor {
		display: flex;
		gap: 15rpx;
		margin-bottom: 30rpx;

		input {
			flex: 1;
			height: 90rpx;
			padding: 0 30rpx;
			background: white;
			border-radius: 12rpx;
			font-size: 28rpx;
			box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);

			&.node-time {
				flex: 0.6;
			}
		}

		.add-btn {
			width: 160rpx;
			height: 90rpx;
			line-height: 90rpx;
			background: #4CD964;
			color: white;
			font-size: 28rpx;
			border-radius: 12rpx;
			transition: all 0.2s;

			&:active {
				opacity: 0.8;
				transform: scale(0.95);
			}
		}
	}

	.node-list {
		flex: 1;
		background: white;
		border-radius: 12rpx;
		margin-bottom: 120rpx;
		box-shadow: 0 2rpx 12rpx rgba(0, 0, 0, 0.04);
		height: 200rpx;

		.node-item {
			display: flex;
			align-items: center;
			padding: 30rpx;
			border-bottom: 1rpx solid #f0f0f0;
			transition: all 0.2s;

			&:active {
				background-color: #f8f8f8;
			}

			.time {
				width: 140rpx;
				font-size: 26rpx;
				color: #666;
				font-family: monospace;
			}

			.text {
				flex: 1;
				font-size: 28rpx;
				color: #333;
				padding-right: 20rpx;
			}

			.delete {
				width: 80rpx;
				text-align: center;
				font-size: 40rpx;
				color: #FF3B30;
				opacity: 0.7;

				&:active {
					opacity: 1;
				}
			}
		}

		.empty-tip {
			text-align: center;
			color: #999;
			font-size: 28rpx;
			padding: 40rpx;
		}
	}

	.fixed-upload-btn {
		position: fixed;
		bottom: 40rpx;
		left: 30rpx;
		right: 30rpx;
		height: 100rpx;
		line-height: 100rpx;
		background: linear-gradient(135deg, #007AFF, #0063CC);
		color: white;
		font-size: 34rpx;
		border-radius: 50rpx;
		box-shadow: 0 8rpx 24rpx rgba(0, 122, 255, 0.3);
		transition: all 0.2s;

		&:active {
			transform: scale(0.98);
			opacity: 0.9;
		}
	}

	.placeholder {
		color: #C0C4CC;
	}
</style>